
<template>
  <div>
    <!-- 登录背景 -->
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>

    <div class="main">
      <div>
        <h1>欢迎使用虎牙直播大数据分析平台</h1>
      </div>
      <div>
        <el-form ref="form" class="form-input">
          <el-form-item style="margin-bottom: 0px">
            <el-input
              v-model="user.phone"
              placeholder="请输入手机号"
              clearable
              @blur="tel()"
            ></el-input>
          </el-form-item>
          <el-row style="text-align: left; margin-left: 15px">
            <font style="color: #fa5151">{{ message }} </font>
          </el-row>
          <el-form-item style="margin-top: 22px">
            <el-input
              v-model="user.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- <el-button @click="log()">log</el-button> -->
      </div>
      <div>
        <el-button @click="login()">登录</el-button>
        <el-button @click="register()">注册</el-button>
        <el-button @click="loginEmail()">切换邮箱登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import stores from "@/store";
export default {
  data() {
    return {
      ruleTel: 0,
      message: "",
      imgSrc: require("../../assets/bgb.jpg"),
      user: {
        id: "",
        name: "",
        phone: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      //处理账号密码为空·
      if (this.user.phone == "" || this.user.password == "") {
        //alert("账号密码不能为空")
        this.$alert("账号密码不能为空", "登录失败", {
          confirmButtonText: "确定",
        });
      } else if (this.ruleTel == 1) {
        this.$alert("请输入正确的手机号", { confirmButtonText: "确定" });
      } else {
        //账号密码不为空,使用手机号登录
        this.$axios
          .post(stores.spring_url + "/login", this.user)
          .then((res) => {
            console.log(res.data.data);
            //登陆成功
            if (res.data.code == 2001) {
              console.log(res.data.data.user.id);
              sessionStorage.setItem("id", res.data.data.user.id);
              sessionStorage.setItem("name", res.data.data.user.name);
              sessionStorage.setItem("phone", res.data.data.user.phone);
              sessionStorage.setItem("email", res.data.data.user.email);
              sessionStorage.setItem("password", res.data.data.user.password);
              // stores.user=res.data.user;
              this.$router.push("/home");
            } else if (res.data.code == 3001) {
              //处理登陆失败
              this.$alert("没有该用户信息，请先注册", {
                confirmButtonText: "确定",
              });
            } else if (res.data.code == 4001) {
              this.$alert("密码错误", {
                confirmButtonText: "确定",
              });
            }
          });
      }
    },
    //手机的验证规则
    tel() {
      var verify1 = /^1[3456789]\d{9}$/; //手机号
      if (verify1.test(this.user.phone) || this.user.phone == "") {
        this.message = "";
        this.ruleTel = 0;
      } else {
        this.message = "请输入正确手机号";
        this.ruleTel = 1;
      }
    },
    //注册
    register() {
      this.$router.push("/register");
    },
    loginEmail() {
      this.$router.push("/loginEmail");
    },
    log() {
      window.sessionStorage.getItem("username");
    },
  },
};
</script>
<style scoped>
.form-input {
  width: 16%;
  margin: auto;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}
/* 登录那玩意居中 */
.main {
  text-align: center; /*让div内部文字居中*/
  border-radius: 20px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>